<template>
  <div>
    <el-form class="formList" style="padding-top: 0" :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px"
      @keyup.enter.native="handleQuery">
      <el-row>
        <el-form-item label="商品名称" prop="productName">
          <el-input v-model="queryParams.productName" placeholder="请输入商品名称" clearable size="small" class="input-rule" />
        </el-form-item>
        <el-form-item label="商品分类" prop="categoryUid">
          <el-cascader :props="{ checkStrictly: true }" v-model="queryParams.categoryUid" :options="categoryOptions" clearable filterable
            class="input-rule">
          </el-cascader>
        </el-form-item>
        <el-form-item style="margin-left: 50px;">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <div class="divTable">
      <el-table border ref="singleTable" v-loading="loading" :data="infoList" highlight-current-row @row-click="rowClick">
        <el-table-column label align="left" width="30">
          <template slot-scope="scope">
            <el-radio :label="scope.row.productUid" v-model="radioId">&nbsp;&nbsp;&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column label="商品图片" align="center" prop="carouselImgOne" width="100">
          <template slot-scope="scope">
            <el-image :z-index="zIndex" v-if="scope.row.carouselImgOne != null && scope.row.carouselImgOne != '' "
              slot="reference" :src="scope.row.carouselImgOne" class="image-rows"
              :preview-src-list="[scope.row.carouselImgOne]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="left" prop="productName" width="200"/>
        <el-table-column v-if="0>1" label="供货价" align="center" prop="costPriceStr" />
        <el-table-column label="零售价" align="center" prop="retailPriceStr" />
        <el-table-column v-if="0>1" label="批发价" align="center" prop="tradePriceStr" />
        <el-table-column label="库存" align="center" prop="stockNumber" sortable />
        <el-table-column v-if="0>1" label="收藏数" align="center" prop="collectNum" />
        <el-table-column v-if="0>1" label="销量" align="center" prop="buyNum" sortable />
        <el-table-column v-if="0>1" label="更新时间" align="center" prop="updateTime" width="200" sortable>
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span><br />
            <span>{{ statusFormat(scope.row.dataStatus) }}</span>
          </template>
        </el-table-column>

      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" :page-sizes="pageSizess" />
    </div>
    <div style="display:flex; justify-content: flex-end;">
      <el-button type="primary" @click="handleAdd">确定</el-button>
    </div>
  </div>
</template>

<script>
  import {
    listInfo,
    getInfo,
    delInfo,
    addInfo,
    updateInfo
  } from "@/api/product/info";
  import {
    selectOptions
  } from "@/api/product/category"

  export default {
    name: "product",
    props: {
      uids: {
        type: Number,
        default: "",
      },
    },
    data() {
      return {
        pageSizess: [5, 10, 15, 20, 25, 30, 50],
        zIndex: 3000,
        currentRow: null,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: null,
        // 商品
        productList: [],
        productObj: {
          productUid: "",
          productName: "",
          productImg: "",
          stockNumber: "",
          price: ""
        },
        // 商品信息表格数据
        infoList: [],
        // 默认数字
        activeClass: 0,
        //品牌
        brandOptions: [],
        // 商品类别
        categoryOptions: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 5,
          productName: null,
          categoryUid: null,
          brandUid: null,
          minBuyNum: null,
          maxBuyNum: null,
          minCostPirce: null,
          maxCostPirce: null,
          minRetailPrice: null,
          maxRetailPrice: null,
          minTradePrice: null,
          maxTradePrice: null,
          dataStatus: 1,
          auditStatus: null,
          stockNumber: null,
          categoryUidOne: null,
          categoryUidTwo: null,
          categoryUidThree: null,
        },
        columns: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        radioId: this.uids
      };
    },
    created() {
      this.getList();
      selectOptions().then(response => {
        this.categoryOptions = response.data;
      });
    },
    methods: {

      rowClick(row) {
        this.radioId = row.productUid;
        if (row) {
          this.productObj.productUid = row.productUid;
          this.productObj.productImg = row.carouselImgOne;
          this.productObj.productName = row.productName;
          this.productObj.price = row.retailPrice;
          this.productObj.stockNumber = row.stockNumber;

        }
        this.single = false;
      },
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
        this.single = true;
      },
      oninput(num, limit) {
        var str = num
        var len1 = str.substr(0, 1)
        var len2 = str.substr(1, 1)
        if (str.length > 1 && len1 == 0 && len2 != ".") {
          str = str.substr(1, 1)
        }
        if (len1 == ".") {
          str = ""
        }
        if (str.indexOf(".") != -1) {
          var str_ = str.substr(str.indexOf(".") + 1)
          if (str_.indexOf(".") != -1) {
            str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
          }
        }
        //正则替换
        str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
        if (limit / 1 === 1) {
          str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/, '$1') // 小数点后只能输 1 位
        } else {
          str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1') // 小数点后只能输 2 位
        }
        return str
      },

      /** 查询商品信息列表 */
      getList() {
        this.loading = true;
        if (this.queryParams.categoryUid != null && this.queryParams.categoryUid.length > 0) {
          let uidArray = this.queryParams.categoryUid;
          this.queryParams.categoryUidOne = uidArray[0];
          if (uidArray.length > 1) {
            this.queryParams.categoryUidTwo = uidArray[1];
          }
          if (uidArray.length > 2) {
            this.queryParams.categoryUidThree = uidArray[2];
          }
        }
        listInfo(this.queryParams).then(response => {
          this.infoList = response.rows;
          this.total = response.total;
          this.loading = false;
          this.queryParams.categoryUidOne = null;
          this.queryParams.categoryUidTwo = null;
          this.queryParams.categoryUidThree = null;
          if (this.uids) {
            this.ids = null;
            for (let i = 0; i < this.infoList.length; i++) {
              let info = this.infoList[i];
              if (info.productUid == this.uids) {
                this.ids = i;
              }
            }
            if (this.ids || this.ids == 0) {
              this.setCurrent(this.infoList[this.ids])
            }
          }
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {};
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.$emit('idsId', this.productObj)
      },
      statusFormat(status) {
        let showStatus = "";
        if (status == "1") {
          showStatus = "销售中";
        } else {
          showStatus = "已下架"
        }
        return showStatus;
      }
    }
  };
</script>

<style scoped>
  .input-rule {
    width: 232.45px;
  }

  .row-mb2 {
    margin: -7.5px -7.5px 7.5px -7.5px;
  }
  
  .image-rows {
    width: 80px;
    height: 80px;
  }
</style>
